<template>
    <div class="orderRight">
        <h4>我的订单</h4>
        <el-tabs class="orderList" v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="全部订单" name="first">
                <div v-if="orderList.length==0" class="empty">当前没有交易订单。</div>
                <div v-else class="orderInfo" v-for="(item,index) in orderList" :key="index">
                    <div class="top">
                        <h4 v-if="item.status==1">等待付款</h4>
                        <h4 v-else-if="item.status==2">订单已支付</h4>
                        <h4 v-else-if="item.status==0">订单已失效</h4>
                        <div class="topButtom">
                            <p>
                                <span>{{item.createdAt}}</span><span>订单号：{{item.order_id}}</span>
                                <span>在线支付</span>
                            </p>
                            <p>应付金额: ￥<span>{{priceList[index]}}</span> 元</p>
                        </div>

                    </div>
                    <div class="content">
                        <ul>
                            <li class="left" v-for="(i,index) in item.goods_info" :key="i.id">
                                <img :src="i.s_goods_photos[0].path" alt="">
                                <div class="detil">
                                    <p>{{i.goods_name}}</p>
                                    <p>{{i.price}}元 x {{i.num}}</p>
                                </div>

                            </li>
                        </ul>
                        <div class="right">
                            <button>立即付款</button>
                            <button>订单详情</button>
                            <button>联系客服</button>
                        </div>
                    </div>
                </div>
            </el-tab-pane>

            <el-tab-pane class="waitPay" label="待支付" name="second">
                <div v-if="await.length==0" class="empty">当前没有待支付订单。</div>
                <div v-else class="orderInfo" v-for="(item,index) in await" :key="index">
                    <div class="top">
                        <h4>等待付款</h4>
                        <div class="topButtom">
                            <p>
                                <span>{{item.createdAt}}</span><span>订单号：{{item.order_id}}</span>
                                <span>在线支付</span>
                            </p>
                            <p>应付金额: ￥<span>{{priceList[index]}}</span> 元</p>
                        </div>

                    </div>
                    <div class="content">
                        <ul>
                            <li class="left" v-for="(i,index) in item.goods_info" :key="i.id">
                                <img :src="i.s_goods_photos[0].path" alt="">
                                <div class="detil">
                                    <p>{{i.goods_name}}</p>
                                    <p>{{i.price}}元 x {{i.num}}</p>
                                </div>

                            </li>
                        </ul>
                        <div class="right">
                            <button>立即付款</button>
                            <button>订单详情</button>
                            <button>联系客服</button>
                        </div>
                    </div>
                </div>

            </el-tab-pane>
            <el-tab-pane label="待收货" name="third">
                <div v-if="ordered.length==0" class="empty">当前没有待收货订单。</div>
                <div v-else class="orderInfo" v-for="(item,index) in ordered" :key="index">
                    <div class="top">
                        <h4>等待付款</h4>
                        <div class="topButtom">
                            <p>
                                <span>{{item.createdAt}}</span><span>订单号：{{item.order_id}}</span>
                                <span>在线支付</span>
                            </p>
                            <p>应付金额: ￥<span>{{priceList[index]}}</span> 元</p>
                        </div>

                    </div>
                    <div class="content">
                        <ul>
                            <li class="left" v-for="(i,index) in item.goods_info" :key="i.id">
                                <img :src="i.s_goods_photos[0].path" alt="">
                                <div class="detil">
                                    <p>{{i.goods_name}}</p>
                                    <p>{{i.price}}元 x {{i.num}}</p>
                                </div>

                            </li>
                        </ul>
                        <div class="right">
                            <button>延长收货</button>
                            <button>查看物流</button>
                            <button>联系客服</button>
                        </div>
                    </div>
                </div>
                
            </el-tab-pane>
            <el-tab-pane label="失效订单" name="fourth">
                <div v-if="invalid.length==0" class="empty">当前没有失效订单。</div>
                <div v-else class="orderInfo" v-for="(item,index) in invalid" :key="index">
                    <div class="top">
                        <h4>订单已失效</h4>
                        <div class="topButtom">
                            <p>
                                <span>{{item.createdAt}}</span><span>订单号：{{item.order_id}}</span>
                                <span>在线支付</span>
                            </p>
                            <p>应付金额: ￥<span>{{priceList[index]}}</span> 元</p>
                        </div>

                    </div>
                    <div class="content">
                        <ul>
                            <li class="left" v-for="(i,index) in item.goods_info" :key="i.id">
                                <img :src="i.s_goods_photos[0].path" alt="">
                                <div class="detil">
                                    <p>{{i.goods_name}}</p>
                                    <p>{{i.price}}元 x {{i.num}}</p>
                                </div>
                            </li>
                        </ul>
                        <div class="right">
                            <button @click="delInvalidOrder(item.id)">删除订单</button>
                            <button>联系客服</button>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import { getAddress, getOrder, getOneOrder, delOrder } from "@/assets/request.js"
export default {
    name: 'ordercenter',
    data() {
        return {
            activeName: 'first',
            // 所有订单数据
            orderList: [],
            // 单组订单商品信息
            orderListInfo: [],
            // 待付款订单
            await: [],
            // 已下单待收货
            ordered: [],
            // 失效订单
            invalid: [],
            // 应付价格数组
            priceList: [],

        }
    },
    computed: {

    },
    methods: {
        // 封装函数，更新订单信息
        async updateOrderList() {
            // 获取订单列表
            let getOrderList = await getOrder({
                project_id: 255,
            })
            getOrderList.data.result.rows.forEach(item => {
                item.createdAt = this.timeFormatSeconds(item.createdAt)
                item.goods_info = JSON.parse(item.goods_info)
            })
            this.orderList = getOrderList.data.result.rows
        },
        // 封装函数，转换时间
        timeFormatSeconds(time) {
            var d = time ? new Date(time) : new Date();
            var year = d.getFullYear();
            var month = d.getMonth() + 1;
            var day = d.getDate();
            var hours = d.getHours();
            var min = d.getMinutes();
            var seconds = d.getSeconds();

            if (month < 10) month = '0' + month;
            if (day < 10) day = '0' + day;
            if (hours < 0) hours = '0' + hours;
            if (min < 10) min = '0' + min;
            if (seconds < 10) seconds = '0' + seconds;

            return (year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + seconds);
        },

        // 删除失效订单
        async delInvalidOrder(id) {
            let delorder = await delOrder(id)
            console.log(delorder);
            this.updateOrderList()
            this.invalid = this.orderList.filter(item => {
            return item.status == 0
        })
            if (delorder.status == 200) {
                this.$message({
                    message: '订单删除成功',
                    type: 'success',
                    duration: 800,
                })
            } else {
                this.$message({
                    message: '订单删除失败',
                    type: 'waring',
                    duration: 1000
                })
            }        
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        // 应付金额
        totalPrice() {

            this.orderList.forEach(item => {
                let p = 0
                item.goods_info.forEach(it => {
                    p += it.price
                })
                this.priceList.push(p)
            })

        }

    },
    async mounted() {
        // 获取订单列表
        let getOrderList = await getOrder({
            project_id: 255,
            limit: 2,
        })
        getOrderList.data.result.rows.forEach(item => {
            item.createdAt = this.timeFormatSeconds(item.createdAt)
            item.goods_info = JSON.parse(item.goods_info)
        })
        this.orderList = getOrderList.data.result.rows
        // console.log(this.orderList);
        // this.updateOrderList()
        this.totalPrice()
        // 筛选出失效订单
        this.invalid = this.orderList.filter(item => {
            return item.status == 0
        })
        // 筛选出待支付订单
        this.await = this.orderList.filter(item => {
            return item.status == 1
        })
        // console.log(this.await);
        // 筛选已下单等待收货订单
        this.ordered = this.orderList.filter(item => {
            return item.status == 2
        })
    },
}

</script>

<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.orderRight {
    width: vw(920);

    h4 {
        font-size: vw(25);
        font-weight: 500;
        margin: vw(18) 0;
    }

    .orderList {
        .orderInfo {
            border: 1px solid rgb(241, 147, 6);
            margin-bottom: vw(10);

            .top {
                background-color: #faf1e3;
                padding: vw(18) vw(20);
                border-bottom: 1px solid rgb(238, 167, 85);

                h4 {
                    color: #ff6700;
                    font-size: vw(20);
                    font-weight: 500;
                    margin-bottom: vw(10)
                }

                .topButtom {
                    color: #757575;
                    font-size: vw(13);
                    display: flex;
                    justify-content: space-between;

                    p:nth-of-type(1) {
                        span {
                            padding: 0 vw(10);
                            border-right: 1px solid rgb(172, 167, 167);
                        }

                        span:nth-of-type(1) {
                            padding-left: 0;
                        }

                        span:nth-of-type(3) {
                            border: none;
                        }
                    }

                    p:nth-of-type(2) {
                        span {
                            color: rgb(240, 73, 73);
                            font-size: vw(20);
                            font-weight: 500;
                            margin-left: vw(3);
                        }
                    }
                }

            }

            .content {
                width: vw(880);
                margin: 0 auto;
                display: flex;
                justify-content: space-between;

                ul {
                    width: vw(400);

                    li {
                        margin: vw(6) 0;
                        display: flex;

                        img {
                            width: vw(90);
                            height: vw(90);
                        }

                        .detil {
                            height: vw(90);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;

                            p:nth-of-type(1) {
                                font-size: vw(14);
                                margin-left: vw(20);
                                margin-bottom: vw(8);
                            }

                            p:nth-of-type(2) {
                                font-size: vw(14);
                                margin-left: vw(20);

                            }
                        }

                    }
                }

                .right {
                    margin-top: vw(18);
                    display: flex;
                    flex-direction: column;

                    button {
                        width: vw(120);
                        height: vw(33);
                        color: #757575;
                        font-size: vw(14);
                        margin-bottom: vw(10);
                        background-color: #fff;
                        border: 1px solid rgb(141, 136, 136);
                        cursor: pointer;
                        &:hover {
                            background-color: rgb(235, 113, 13);
                            color: #fff;
                        }
                    }
                }
            }
        }

        .empty {
            font-size: vw(20);
            color: #757575;
        }
    }
}
</style>
